<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>vue3中v-model</title>
    <style>
      .comp-container {
        position: absulute;
      }
    </style>
  </head>

  <body>
    <div id="app"></div>
    <script src="https://unpkg.com/vue@next"></script>
    <script>
      const app = Vue.createApp({
        data() {
          return {
            count: 1,
            msg: 'hello, 组件',
          }
        },
        template: `
          <child v-model="count" v-model:msg="msg" />
        `,
      })

      app.component('child', {
        props: {
          modelValue: {
            type: Number,
          },
          msg: {
            type: String,
          },
        },
        methods: {
          handleCountClick() {
            this.$emit('update:modelValue', this.modelValue + 3)
          },
          handleUpdateMsg() {
            this.$emit('update:msg', this.msg + 'x')
          },
        },
        template: `
          <div>
            <h2>我是子组件</h2>
            <div>当前count的值：{{modelValue}}</div>
            <button @click="handleCountClick">更新count的值</button>
            <div>当前msg的值：{{msg}}</div>
            <button @click="handleUpdateMsg">更新msg的值</button>
          </div>
        `,
      })
      app.mount('#app')
    </script>
  </body>
</html>
